import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useState } from 'react';
import TextArea from 'antd/es/input/TextArea';
import { ButtonProps } from 'antd/es/button/button'
import { FittingDesignData } from '@manycore/custom-ksg-viewer-sdk';
import message from 'antd/es/message/index'

export function FittingViewerDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
        buttonProps?: ButtonProps;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app } } = AppStore.useContainer();
    const [fittings, setFittings] = useState<string>();

    const CApis = [
        {
            name: '生成随机孔槽数据',
            onClick: () => {
                const selected = app?.selectionService.getSelected();
                if (!selected || selected.length === 0) {
                    message.warn('请先选中板件！');
                    return;
                }
                const selectId = selected[0];
                const data = mockFittingDesignData({ modelId: selectId! });
                setFittings(JSON.stringify(data));
            }
        },
        {
            name: '全量设置孔槽数据',
            onClick: () => {
                try {
                    app!.fittingViewerService.setFittings([JSON.parse(fittings!) as FittingDesignData])
                }
                catch(err){
                    message.error('孔槽数据为空或者数据格式不正确');
                }
            }
        }, {
            name: '更新孔槽数据',
            onClick: () => {
                try {
                    app!.fittingViewerService.setFittings([JSON.parse(fittings!) as FittingDesignData])
                }
                catch(err){
                    message.error('孔槽数据为空或者数据格式不正确');
                }
            }
        }, {
            name: '清空全部孔槽',
            onClick: () => app!.fittingViewerService.clearFittings()
        }
    ]



    return <>
        <Divider>配件（孔槽）</Divider>
        <TextArea value={fittings} onChange={(e) => setFittings(e.target.value)}></TextArea>
        {createButton(CApis)}
    </>
}



// 模拟生成唯一id 
const uuid = () => `${Date.now()}-${Math.random() * 1000000000}`;


/**
 * 模拟生成孔槽数据
 * @param options
 * @returns
 */
export const mockFittingDesignData = (options: {
    modelId: string;
}): FittingDesignData => {
    const { modelId } = options;
    return {
        holes: {
            [modelId]: [
                {
                    id: uuid(),
                    fittingType: 2,
                    params: [],
                    depth: 20,
                    diameter: 20,
                    plankFaceId: 0,
                    start: {
                        x: -100,
                        y: 0,
                        z: 20,
                    },
                    end: {
                        x: 100,
                        y: 0,
                        z: 20,
                    },
                },
            ],
        },
        grooves: {
            [modelId]: [
                {
                    id: uuid(),
                    fittingType: 1,
                    params: [],
                    depth: 20,
                    width: 20,
                    plankFaceId: 0,
                    start: {
                        x: 300,
                        y: 0,
                        z: 20,
                    },
                    end: {
                        x: 100,
                        y: 0,
                        z: 20,
                    },
                },
            ],
        },
        hardwareGrooves: {
            [modelId]: [
                {
                    id: uuid(),
                    plankFaceId: 0,
                    depth: 20,
                    fittingType: 4,
                    points: [
                        {
                            position: {
                                x: 500,
                                y: 0,
                                z: 0,
                            },
                            // 倒角
                            type: 2,
                            cornerCutDistance: [30, 60],
                        },
                        {
                            position: {
                                x: 500,
                                y: -300,
                                z: 0,
                            },
                            // 倒圆
                            type: 1,
                            radius: 60,
                        },
                        {
                            position: {
                                x: 200,
                                y: -150,
                                z: 0,
                            },
                            // 切圆
                            type: 3,
                            radius: 20,
                            clockwise: false,
                        },
                    ],
                    lines: [
                        {
                            // 直线
                            type: 0,
                        },
                        {
                            type: 0,
                        },
                        {
                            type: 0,
                        },
                    ],
                },
                {
                    id: uuid(),
                    plankFaceId: 0,
                    depth: 20,
                    fittingType: 4,
                    points: [
                        {
                            position: {
                                x: 1000,
                                y: 0,
                                z: 0,
                            },
                            // 普通点
                            type: 0,
                        },
                        {
                            position: {
                                x: 1000,
                                y: -500,
                                z: 0,
                            },
                            type: 0,
                        },
                        {
                            position: {
                                x: 700,
                                y: -500,
                                z: 0,
                            },
                            type: 0,
                        },
                        {
                            position: {
                                x: 700,
                                y: 0,
                                z: 0,
                            },
                            type: 0,
                        },
                    ],
                    lines: [
                        {
                            // 圆弧
                            type: 1,
                            radius: 180,
                            clockwise: true,
                            minorArc: true,
                        },
                        {
                            type: 0,
                        },
                        {
                            type: 1,
                            radius: 300,
                            clockwise: true,
                            minorArc: true,
                        },
                        {
                            type: 1,
                            radius: 180,
                            clockwise: false,
                            minorArc: true,
                        },
                    ],
                },
            ],
        },
    };
};
